<template>
    <view>
        <!-- 日期人数 -->
        <view class="filter-card-wrap">
            <view class="card-col" @click="openCalendar">
                <view class="card-col-label">出游日期</view>
                <view class="card-col-info" style="font-size:32rpx">
                    <text v-if="choiceDate[0].format">{{ choiceDate[0].format }}</text>
                    <text v-else>{{ cardInfo.startDate }}</text>
                </view>
                <view class="card-col-icon">
                    <image src="https://cdn1.visiotrip.com/h5AndMini/2023-07-11/bot.png" class="image" mode="widthFix"></image>
                </view>
            </view>
            <view class="card-col">
                <view class="card-col-label">成人</view>
                <view class="card-col-info"><input type="number" :cursor-spacing="textareaCursorSpace" v-model="adult"></view>
                <view class="card-col-icon">
                    <image src="https://cdn1.visiotrip.com/h5AndMini/2023-07-11/edit.png" class="image" mode="widthFix"></image>
                </view>
            </view>
            <view class="card-col">
                <view class="card-col-label">儿童</view>
                <view class="card-col-info"><input type="number" :cursor-spacing="textareaCursorSpace" v-model="children"></view>
                <view class="card-col-icon">
                    <image src="https://cdn1.visiotrip.com/h5AndMini/2023-07-11/edit.png" class="image" mode="widthFix"></image>
                </view>
            </view>

            <view class="confirm-btn" @click="confirm(choiceDate[0])">确认选择</view>
        </view>
        <uni-popup ref="calendar" type="bottom" :safe-area="false">
            <view class="calendarBox">
                <view class="calendar-tabs">
                    <view :class="{ act: calendarAct === 0 }" @click="calendarAct = 0">
                        有明确日期
                    </view>
                    <view :class="{ act: calendarAct === 1 }" @click="calendarAct = 1">
                        有大致计划
                    </view>
                </view>
                <datePicker hideHeader @change="calendarChange" :startDate="choiceDate[0].re" :endDate="choiceDate[0].re"
                    :daysCount="daysCount" v-show="calendarAct === 0"></datePicker>
                <view class="have-plan" v-show="calendarAct === 1">
                    <view :class="{ 'active': activeTagIndex === index, 'plan-tag': true }" v-for="(item,index) in planTagList" :key="index" @click="clickTag(item.roughPlanDate,index)">
                        <text>{{ item.roughPlanKey }}</text>
                    </view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>

const { queryRoughPlan } = require("../serve/index.js");
// import { queryRoughPlan } from '../serve'
import datePicker from "./date-picker1/components/date-picker/date-picker.vue"

export default {
    props: {
        cardInfo: {
            type: Object
        },
		isHotelJourneyDemand: {
			type: Boolean
		}
    },
    data() {
        return {
            daysCount: 365,
            //初始日期
            choiceDate: [{}],
            act: '',
            calendarAct: 0,
            placeList: [],
            planTagList: [],
            activeTagIndex: null,
            adult: 0,
            children: 0,
            textareaCursorSpace: uni.getSystemInfoSync().platform == "ios" ? 60 : 15,
        };
    },
    mounted() {
        console.log('tripData', this.cardInfo)
        this.choiceDate[0].re = this.cardInfo.startDate
        this.adult = this.cardInfo.travellerNum.adult
        this.children = this.cardInfo.travellerNum.children
        this.getPlanTagList()
    },
    methods: {
        openCalendar() {
            this.$emit("setTabBar", false);
            this.$refs.calendar.open();
        },
        //日历选择
        calendarChange({choiceDate}) {
            const format = (date) => date.replaceAll("-", "/")
            this.choiceDate = [{ re: choiceDate.re, format: format(choiceDate.re) }]
            this.$emit("setTabBar", true);
            this.$refs.calendar.close();

        },
        getPlanTagList() {
            queryRoughPlan({}).then(res => {
            this.planTagList = res.data
          }).catch(error => {
            console.log(error)
          })
        },
        clickTag(val,index) {
            this.activeTagIndex = index
            const format = (date) => date.replaceAll("-", "/")
            this.choiceDate = [{ re: val, format: format(val) }]
            this.$emit("setTabBar", true);
            this.$refs.calendar.close();
        },
        confirm(choiceDate) {
            console.log(this.adult,this.children,'---------------108')
            let params = {
                journeyDemand: {
                    startDate: choiceDate.re,
                    travellerNum: {
                        adult: this.adult,
                        children: this.children,
                        // elder: 1
                    }
                },
                isHotelJourneyDemand: this.isHotelJourneyDemand
            } 
            uni.$emit('editItinerary', params)
        }
    },
    components: {
        datePicker,
    }
};
</script>

<style lang="scss" scoped>
@mixin flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex {
    display: flex;
}

.font-weight-normal {
    line-height: 36rpx;
    font-weight: normal;
    color: #6b7489;
    font-size: 24rpx;
}


.trip-card-wrap {
    margin-top: 30rpx;
    background: #ffffff;
    border-radius: 30rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: #4d566a;
    line-height: 36rpx;

    .card-title {
        margin-bottom: 29rpx;
        height: 88rpx;
        line-height: 88rpx;
        padding: 0 40rpx;
        background: #e3effc;
        border-radius: 30rpx 30rpx 0rpx 0rpx;
        font-size: 32rpx;
        font-weight: 600;
        color: #4d566a;
        @include maxLine(1);
    }

    .card-date {
        padding: 0 40rpx;

        text {
            font-size: 32rpx;
        }
    }

    .card-timeline {
        padding: 0 40rpx 63rpx;
    }

    .day-num {
        padding-top: 30rpx;
        padding-bottom: 28rpx;
        line-height: 30rpx;
        font-size: 32rpx;
        font-weight: 600;
        color: #4d566a;
        letter-spacing: 1px;
    }

    .address-wrap {
        margin-bottom: 10rpx;
        padding: 10rpx;
        background: #fff9f7;
        border-radius: 10rpx;

        .flex+.place-content:not(:first-child) {
            margin-top: 16rpx;
        }
    }

    .address-img {
        flex: 0 0 93rpx;
        width: 93rpx;
        height: 93rpx;
        border-radius: 10rpx;
    }

    .address-info {
        padding-left: 20rpx;
        padding-top: 10rpx;
    }

    .place-content {
        margin-top: 20rpx;
        padding: 16rpx 27rpx 16rpx 13rpx;
        display: flex;
        background: #eef2fa;
        border-radius: 10rpx;
    }

    .place-img {
        flex: 0 0 80rpx;
        width: 80rpx;
        height: 114rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }

    .place-price {
        font-weight: bold;
        float: right
    }

    .trip-btns {
        display: flex;
        margin-top: 30rpx;
    }

    .trip-btn {
        font-size: 28rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 20rpx;
        text-align: center;

        &:first-child {
            font-weight: 400;
            width: 190rpx;
            color: #4D566A;
            border: 1rpx dashed #4D566A;
        }

        &:last-child {
            flex: 1;
            margin-left: 20rpx;
            color: #FFFFFF;
            background: $sl-color-btn-background;
            box-shadow: 0rpx 2rpx 15rpx -2rpx rgba(15, 69, 111, 0.36);
        }
    }

    .radius-top {
        position: relative;

        .radius-icon {
            width: 26rpx;
            height: 26rpx;
            position: absolute;
            z-index: 2;
            left: 3rpx;
        }

        .radius-icon.active {
            width: 14rpx;
            height: 14rpx;
            left: 8rpx;
        }
    }

    .line-box::after {
        content: "";
        width: 1rpx;
        height: 100%;
        position: absolute;
        left: 14rpx;
        top: 0rpx;
        border-left: 2rpx dashed #d8d8d8;
        // background: #d8d8d8;
        z-index: 1;
    }

    .general {
        position: relative;
        padding: 0 0 4rpx 40rpx;

        .day-title {
            font-size: 32rpx;
            color: $sl-color-grey;
            font-weight: 600;
            padding-bottom: 20rpx;
        }

        .day-content {
            font-size: 28rpx;
            color: #848891;
            padding-bottom: 16rpx;
        }
    }
}

.filter-card-wrap {
    margin-top: 30rpx;
    padding: 28rpx 18rpx 40rpx;
    background: #FFFFFF;
    border-radius: 30rpx;

    .card-col {
        display: flex;
        align-items: center;
        height: 88rpx;
        background: #E3EFFC;
        border-radius: 20rpx;
        font-size: 28rpx;
        color: #4D566A;

        &:not(:last-child) {
            margin-bottom: 10rpx;
        }
    }

    .card-col-label {
        width: 170rpx;
        height: 100%;
        background: #CCE5FF;
        border-radius: 20rpx 0rpx 0rpx 20rpx;
        @include flex-center;
    }

    .card-col-info {
        flex: 1;
        font-weight: 600;
        font-size: 28rpx;
        padding-left: 30rpx;
    }

    .card-col-icon {
        height: 100%;
        padding: 0 30rpx;
        @include flex-center;

        .image {
            width: 18rpx;
            height: auto;
        }
    }

    .confirm-btn {
        margin: 40rpx 28rpx 0;
        height: 80rpx;
        font-size: 28rpx;
        font-weight: 600;
        color: #3891FE;
        border: 2rpx solid #3891FE;
        border-radius: 20rpx;
        @include flex-center;
    }
}

.nearby {
    padding-bottom: 60rpx;

    .place-wrap {
        padding: 0 40rpx;
        max-height: 768rpx;
        overflow: auto;

        &:first-child {
            margin-top: 20rpx;
        }
    }

    .trip-btns {
        padding: 0 40rpx;
    }

    .trip-btn {
        margin-left: 0 !important;
    }

    .place-content {
        flex-direction: column;
        margin-top: 10rpx;
        position: relative;
        padding: 16rpx 30rpx 16rpx 13rpx;
    }

    .place-check-btn {
        width: 39rpx;
        height: 39rpx;
        position: absolute;
        top: 26rpx;
        right: 26rpx;
    }

    .place-name {
        padding-right: 52rpx;
    }

    .place-price {
        margin-top: 18rpx;
    }
}

.calendar-tabs {
    display: flex;
    padding-left: 20rpx;
    font-size: 28rpx;
    color: #696969;
    text-align: center;

    >view {
        width: 200rpx;
        padding: 36rpx 0;
    }

    .act {
        color: #000;
        font-weight: 600;
        font-size: 30rpx;
    }
}

.calendarBox {
    height: 800rpx;
    border-radius: 30rpx 30rpx 0 0;
    background: #ffffff;
    .have-plan {
        display: flex;
        flex-wrap: wrap;
        padding-top: 57rpx;
        padding-left: 32rpx;
        .plan-tag {
            width: 130rpx;
            height: 60rpx;
            margin-right: 30rpx;
            line-height: 60rpx;
            margin-bottom: 38rpx;
            text-align: center;
            background: #EAEAEA;
            border-radius: 10rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #515151;
        }
        .active {
            width: 130rpx;
            height: 60rpx;
            line-height: 60rpx;
            margin-bottom: 38rpx;
            text-align: center;
            background: #547AE4;
            border-radius: 10rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
        }
    }
}
</style>
